<template>
	<div class="goods-list">

		<!-- <router-link class="goods-item" v-for='item in goodslist' :key='item.id' :to="'/home/goodsinfo/' + item.id" tag='div'>
			<img :src="item.img_url" alt="">
			<h1 class="title">{{item.title}}</h1>
			<div class="info">
				<p class="price">
					<span class="now">￥{{item.sell_price}}</span>
					<span class="old">￥{{item.market_price}}</span>
				</p>
				<p class="sell">
					<span>热卖中</span>
					<span>剩{{item.stock_quantity}}件</span>
				</p>
			</div>
		</router-link> -->



		<!-- 在网页中，有两种跳转方式：
			方式1：使用 a 标签的形式 叫做 标签跳转
			方式2：使用 window.location.href 的形式 叫做 编程式导航 -->
		<div class="goods-item" v-for='item in goodslist' :key='item.id' @click='goDetail(item.id)'>
			<img :src="item.img_url" alt="">
			<h1 class="title">{{item.title}}</h1>
			<div class="info">
				<p class="price">
					<span class="now">￥{{item.sell_price}}</span>
					<span class="old">￥{{item.market_price}}</span>
				</p>
				<p class="sell">
					<span>热卖中</span>
					<span>剩{{item.stock_quantity}}件</span>
				</p>
			</div>
		</div>

		<mt-button type='danger' size='large' @click='getMore'>加载更多</mt-button>
	</div>
</template>

<script>
	export default {
		data() { // data 是往自己组件内部挂载一些私有的数据
			return {
				pageindex: 1, // 分页的页数
				goodslist: [] // 存放商品列表信息的数组
			}
		},
		created() {
			this.getGoodList();
		},
		methods: {
			getGoodList() {
				// 获取商品列表
				this.$http.get('api/getgoods?pageindex=' + this.pageindex).then(result => {
					if(result.body.status === 0) {
						// this.goodslist = result.body.message;
						// 把商品列表老数据和新数据进行拼接
						this.goodslist = this.goodslist.concat(result.body.message);
					}
				})
			},
			getMore() {
				this.pageindex++;
				this.getGoodList();
			},
			goDetail(id) {
				// 使用 JS 的形式进行路由导航
				// 注意：一定要区分 this.$route 和 this.$router 这两个对象的差别
				// 其中： this.$route 是路由【参数对象】，所有路由中的参数 params，query 都属于它
				// 其中：this.$router 是一个路由【导航对象】 用它可以方便的使用 JS 代码，实现路由的前进、后退、跳转到新的 URL 地址
				// console.log(this);
				// 1.比较简单的一种方式进行跳转
				// this.$router.push('/home/goodsinfo/' + id);
				// 2.传递对象的方式进行跳转
				// this.$router.push({path:'/home/goodsinfo/' + id});
				// 3.传递命名路由的方式跳转
				this.$router.push({name:'goodsinfo', params:{id:id}})

			}
		}
	}
</script>

<style lang='scss' scoped>
	.goods-list {
		display: flex;
		flex-wrap: wrap;
		padding: 7px;
		justify-content: space-between;

		.goods-item{
			width: 49%;
			border: 1px solid #ccc;
			box-shadow: 0 0 8px #ccc;
			margin: 4px 0;
			padding: 2px;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			min-height: 293px;
			img{
				width: 100%;
			}
			.title{
				font-size: 14px;
			}
			.info {
				background-color: #eee;
				p {
					margin: 0;
					padding: 5px;
				}
				.price {
					.now {
						color: red;
						font-weight: bold;
						font-size: 16px;
					}
					.old {
						/*设置中间横杠*/
						text-decoration: line-through;
						font-size: 12px;
						margin-left: 10px;
					}
				}
				.sell {
					display: flex;
					justify-content: space-between;
					font-size: 13px;
				}
			}
		}
	}
</style>